<template>
  <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      class="form-add"
      fullscreen
      :visible.sync="visible">
    <ng-form-design ref="formDesign" :config="formConfig" :reder="false">
      <template slot="formName">
        <el-input v-model="dataForm.name" class="model-name" placeholder="模板名称">
          <template slot="prepend">模板名称</template>
        </el-input>
      </template>
      <template slot="controlButton">
        <el-button type="text" size="medium" icon="el-icon-coin" :disabled="isOnSubmit" @click="dataFormSubmit()">保存
        </el-button>
      </template>

      <template slot="form-extend-properties" slot-scope="{data }">

        <FormList :list="data.list" :config="data.config"/>

      </template>
    </ng-form-design>

    <!--  <span slot="footer" class="dialog-footer" v-loading="isOnSubmit">
       <el-button @click="visible = false">取消</el-button>
       <el-button type="primary" @click="dataFormSubmit()" :disabled="isOnSubmit">确定</el-button>
     </span> -->
  </el-dialog>
</template>

<script>
import FormList from './formList'
import {getInfo, saveOrUpdate} from '@/api/form/template'
import {getAll as getDictAll} from '@/api/sys/dict'

export default {
  components: {
    FormList
  },
  data() {
    return {
      visible: false,
      isOnSubmit: false,
      dataForm: {
        id: null,
        code: '',
        name: '',
        templateData: '',
        status: 0
      },
      dataRule: {
        name: [
          {required: true, message: '模板名称不能为空', trigger: 'blur'}
        ]
      },
      formConfig: { // 动态表单配置项
        dict: [] // 数据字典配置
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id
      this.visible = true
      this.isOnSubmit = false
      this.$nextTick(() => {

        if (this.dataForm.id) {
          getInfo(this.dataForm.id).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.code = data.data.code
              this.dataForm.name = data.data.name
              if (data.data.templateData) {
                this.dataForm.templateData = JSON.parse(data.data.templateData)

                this.$refs.formDesign.initModel(this.dataForm.templateData)
              }
              this.dataForm.status = data.data.status
            }
          })
        }

        // 2022-03-10 lyf 获取数据字典信息
        getDictAll().then(({data}) => {
          const dicts = data.data
          dicts.forEach(t => {
            t.label = t.name
          })
          this.formConfig.dict = dicts
        })

      })
    },
    // 表单提交
    dataFormSubmit() {
      // 获取表单数据
      this.dataForm.templateData = this.$refs.formDesign.getModel()
      if (!this.dataForm.name) {
        this.$message.error('表单名称不能为空')
        return
      }

      const form_ = JSON.stringify(this.dataForm.templateData)

      this.isOnSubmit = true

      const postData = {
        'id': this.dataForm.id || undefined,
        'name': this.dataForm.name,
        'templateData': form_
      }

      saveOrUpdate(postData).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 500
          })
          this.visible = false
          this.$emit('refreshDataList')
        } else {
          this.$message.error(data.msg)
        }
      }).finally(() => {
        this.isOnSubmit = false
      })

    }
  },
  mounted() {

    console.log("======================");
    var tt = document.querySelector('.el-col .el-col-6 .title > a ');
    console.log(tt);
    // console.log(tt["href"]);
  }
}
</script>
<style lang="scss">
.form-add {

  .el-dialog__body {
    padding: 5px;
  }

  .model-name {
    width: 300px;
  }
}

</style>